<template>
	<view class="content">
		<view class="user-item" v-for="(item,index) in userList" :key="index" @click="userClick(item)">
			<view class="user-item-title">{{item.title}}</view>
			<view class="user-item-msg">
				<image v-if="item.field=='head_pic'" :src="userInfo.head_pic" class="user-item-msg_header"></image>
				<text v-else-if="item.field=='gender'">{{userInfo[item.field]==1?'男':'女'}}</text>
				<text v-else>{{userInfo[item.field]?userInfo[item.field]:'选填'}}</text>
				<image src="../../static/imgs/mine/right.png" v-if="item.field!='mobile'"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getUser
	} from "../../static/js/api/user.js";
	export default{
		data(){
			return{
				userList:[
					{
						title:"头像",
						field:"head_pic",
					},{
						title:"真实姓名",
						field:"name",
					},{
						title:"身份证号",
						field:"id_card",
					},{
						title:"性别",
						field:"gender",
					},{
						title:"昵称",
						field:"nickname",
					},{
						title:"简介",
						field:"introduce",
					},{
						title:"详细地址",
						field:"address",
					},{
						title:"绑定手机号",
						field:"mobile",
					}
				],
				userInfo:{},
			}
		},
		onShow() {
			this.getUserMsg()
		},
		methods:{
			getUserMsg() {
				getUser().then(res => {
					this.userInfo = res.user
				})
			},
			userClick(item){
				item.value = this.userInfo[item.field]
				if(item.field != 'mobile'){
					uni.navigateTo({
						url:"/pages/mine/eidtUser?userItem="+JSON.stringify(item)
					})
				}
			}
		}
	}
</script>

<style lang="scss" scped>
	.content{
		.user-item{
			display: flex;
			background-color: #fff;
			margin-bottom: 1px;
			height: 100rpx;
			width: calc(100% - 60rpx);
			padding: 0 30rpx;
			justify-content: space-between;
			align-items: center;
			font-size: 28rpx;
			font-weight: bold;
			.user-item-msg{
				font-size: 28rpx;
				font-weight: 400;
				color: #7A7A7A;
				display: flex;
				align-items: center;
				&_header{
					width: 60rpx!important;
					height: 60rpx!important;
					border-radius: 50% 50%;
				}
				image{
					width: 32rpx;
					height: 32rpx;
				}
			}
		}
	}
</style>